<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :fullscreen="fullscreen"
      width="90%"
      :before-close="handleClose"
      append-to-body
    >
      <div
        slot="title"
        style="display: flex; justify-content: space-between;align-items: center;"
      >
        <div>{{ dialogTitle }}</div>
        <div
          style="margin-right: 30px; cursor: pointer;"
          @click="fullscreen = !fullscreen"
        >
          <img
            style="width: 18px; height: 18px;"
            :src="
              !fullscreen
                ? require('../../../assets/icon/add.png')
                : require('../../../assets/icon/fix.png')
            "
            alt=""
          />
        </div>
      </div>
      <div class="msg" style="overflow-y: auto; height: 60vh;">
        <div class="msg-title">
          根据国家税收法律法规及增值税相关规定制定本表。纳税人不论有无销售额，均应按税务机关核定的纳税期限填写此表，并向当地税务机关申报。
        </div>
        <div class="msg-time">
          <div class="msg-time-left">
            <div>税款所属时间：</div>
            <div>
              <span class="border-b">{{
                info.taxPeriodStart ? info.taxPeriodStart : "-"
              }}</span>
              至
              <span class="border-b">
                {{ info.taxPeriodEnd ? info.taxPeriodEnd : "-" }}</span
              >
            </div>
          </div>
          <div>
            <div class="msg-time-left">
              <div>填表日期：</div>
              <div>
                <span class="border-b">{{
                  info.fillInFormTime ? info.fillInFormTime : "-"
                }}</span>
              </div>
            </div>
          </div>
          <div>
            <div class="msg-time-left"></div>
            <!-- <div>金额单位：{{ taxInfo.valueAddTaxDetailsVo.amountUnit }} </div> -->
          </div>
        </div>

        <!-- 表格1 -->
        <div>
          <div class="person-msg">
            <div class="msg-item">
              <div class="msg-item-s bordernone">
                <div class="table-item">纳税人识别号(统一社会信用代码)：</div>
                <div style="border-top: none" class="table-item">
                  {{ taxInfo.creditCode ? taxInfo.creditCode : "-" }}
                </div>
              </div>
              <div class="msg-item-s bordernone">
                <div class="table-item">所属行业：</div>
                <div class="table-item">
                  {{ taxInfo.industry ? taxInfo.industry : "-" }}
                </div>
              </div>
            </div>
            <div class="msg-item">
              <div class="msg-item-s bordernone">
                <div class="table-item">纳税人名称：</div>
                <div class="table-item">
                  {{ taxInfo.taxpayerName ? taxInfo.taxpayerName : "-" }}
                </div>
              </div>
              <div class="msg-item-s bordernone">
                <div class="table-item">注册地址：</div>
                <div class="table-item">
                  {{ taxInfo.registerAddress ? taxInfo.registerAddress : "-" }}
                </div>
              </div>
            </div>
            <div class="msg-item">
              <div class="msg-item-s bordernone">
                <div class="table-item">法定代表人姓名：</div>
                <div class="table-item">
                  {{ taxInfo.legalPerson ? taxInfo.legalPerson : "-" }}
                </div>
              </div>
              <div class="msg-item-s bordernone">
                <div class="table-item">生产经营地址：</div>
                <div class="table-item">
                  {{ taxInfo.produceAddress ? taxInfo.produceAddress : "-" }}
                </div>
              </div>
            </div>
            <div class="msg-item">
              <div class="msg-item-s bordernone">
                <div class="table-item">开户银行及账号：</div>
                <div class="table-item">
                  {{ taxInfo.openAccountBank ? taxInfo.openAccountBank : "-" }}
                  {{
                    taxInfo.bankAccountNumber ? taxInfo.bankAccountNumber : "-"
                  }}
                </div>
              </div>
              <div class="msg-item-s">
                <div class="table-item">登记注册类型：</div>
                <div class="table-item">
                  {{
                    taxInfo.loginRegisterType ? taxInfo.loginRegisterType : "-"
                  }}
                </div>
              </div>
            </div>
            <div class="msg-item1">
              <div class="msg-item-s1">
                <div class="table-item1">电话号码：</div>
                <div class="table-item1">
                  {{ taxInfo.phone ? taxInfo.phone : "-" }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 表格2 -->
        <div style="margin-top: 20px">
          <el-table
            :data="tableData"
            border
            row-key="columnNumber"
            :tree-props="treeProps"
            size="mini"
            :default-expand-all="true"
          >
            <el-table-column prop="projectName" label="名称"></el-table-column>
            <el-table-column prop="columnNumber" label="栏次"></el-table-column>
            <el-table-column label="类别">
              <template slot-scope="scope"> 销售额</template>
            </el-table-column>
            <el-table-column
              :label="objTableTitle.A"
              align="center"
              :colspan="2"
            >
              <template slot="header" slot-scope="{ column }">
                <span
                  v-if="
                    column.columnKey !== 'generalProjectsOfMonth' &&
                      column.columnKey !== 'generalProjectsOfYear'
                  "
                  >{{ column.label }}</span
                >
              </template>
              <el-table-column
                prop="generalProjectsOfMonth"
                :label="objTableTitle.C"
              ></el-table-column>
              <el-table-column
                prop="generalProjectsOfYear"
                :label="objTableTitle.D"
              ></el-table-column>
            </el-table-column>
            <el-table-column
              :label="objTableTitle.B"
              align="center"
              :colspan="2"
            >
              <template slot="header" slot-scope="{ column }">
                <span
                  v-if="
                    column.columnKey !==
                      'immediateCollectionWithdrawalProjectsOfMonth' &&
                      column.columnKey !==
                        'immediateCollectionWithdrawalProjectsOfYear'
                  "
                  >{{ column.label }}</span
                >
              </template>
              <el-table-column
                prop="immediateCollectionWithdrawalProjectsOfMonth"
                :label="objTableTitle.C"
              ></el-table-column>
              <el-table-column
                prop="immediateCollectionWithdrawalProjectsOfYear"
                :label="objTableTitle.D"
              ></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getValueAddResultsDetail } from "@/api/tax";
import { getDaysDifferenceAndCheck } from "@/utils/date";
export default {
  data() {
    return {
      treeProps: {
        children: "child",
        hasChildren: "hasChildren"
      },
      taxInfo: {},
      tableData: [],
      dialogVisible: false,
      info: {},
      fullscreen: false,
      dialogTitle: "",
      objTableTitle: {
        A: "一般项目",
        B: "即征即退项目",
        C: "本月数",
        D: "本年累计"
      }
    };
  },
  methods: {
    // 打开弹框
    handleOpen(v) {
      // console.log(v.applyTableName);
      this.dialogTitle = v.applyTableName;
      getValueAddResultsDetail(v.id).then(res => {
        this.info = res.data;
        this.taxInfo = res.data.enterpriseInfo;
        console.log(this.dialogTitle.includes("一般纳税人适用"));
        if (this.dialogTitle.includes("一般纳税人适用")) {
          this.objTableTitle = {
            A: "一般项目",
            B: "即征即退项目",
            C: "本月数",
            D: "本年累计"
          };
        } else {
          this.objTableTitle = {
            A: "本期数",
            B: "本年累计",
            C: "货物及劳务",
            D: "服务,不动产和无形资产"
          };
        }
        this.tableData = res.data.sellAmount;
      });
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-table__expand-icon {
  display: none !important;
}
.bordernone {
  border-bottom: none !important;
}
.msg {
  .msg-title {
    font-size: 14px;
    color: #222;
  }
  .msg-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    > div {
      width: 33%;
      font-size: 14px;
      color: #222;
      > div span {
        font-size: 14px;
      }
    }
    .msg-time-left {
      display: flex;
      align-items: center;
      .border-b {
        text-align: center;
        display: inline-block;
        width: 100px;
        padding-bottom: 5px;
        border-bottom: 1px solid #ccc;
      }
    }
  }

  .person-msg {
    margin-top: 20px;
    .msg-item {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      width: 100%;
      > div {
        &:nth-child(1) {
          border-right: none;
        }
        &:nth-child(2) {
        }
      }
      .msg-item-s {
        //   width: 25%;
        width: 100%;
        display: flex;
        align-items: center;
        border: 1px solid #ccc;

        > div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          &:nth-child(1) {
            height: 40px;
            // border-right: 1px solid #ccc;
            background-color: #f5f5f5;
          }
          &:nth-child(2) {
          }
        }
        .table-item {
          width: 100%;
          padding-left: 10px;
          // padding: 10px;
          // margin-right: 20px;
        }
      }
    }

    .msg-item1 {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      width: 100%;
      > div {
        height: 40px;
        &:nth-child(1) {
        }
        &:nth-child(2) {
        }
      }
      .msg-item-s1 {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        > div {
          &:nth-child(1) {
            width: 50%;
            // border-right: 1px solid #ccc;
            background-color: #f5f5f5;
          }
          &:nth-child(2) {
          }
        }
        .table-item1 {
          padding: 10px;
        }
      }
    }
  }
}
</style>
